<template>
  <div style="position: relative; height: 99.9%">
    <breadcrumb></breadcrumb>
    <div class="Box">
      <div class="header">
        <h2 style="
            font-size: 16px;
            color: #262626;
            font-family: MicrosoftYaHei-Bold;
          ">
          {{ orderId ? "编辑承运订单" : "创建承运订单" }}
        </h2>
      </div>
      <div class="main">
        <!-- 交易信息板块 -->
        <div class="main_item">
          <div class="titleBox">
            <div class="shuxian"></div>
            <div class="title">交易信息</div>
          </div>
          <div class="formItem">
            <el-form :model="formData" :rules="SchedulingRules" ref="transactionForm" label-width="117px"
              class="input_form">
              <el-row style="width: 100%">
                <el-col :span="8">
                  <el-form-item label="货主" prop="ownerId">
                    <el-input size="small" :readOnly="true" v-model="transactionForm.huozhu" placeholder="请选择货主">
                      <template slot="append">
                        <div style="cursor: pointer" @click="Selectcargoe">
                          选择货主
                        </div>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="项目名称" prop="projectId">
                    <el-input size="small" v-model="transactionForm.name" :readOnly="true" placeholder="请选择项目">
                      <template slot="append">
                        <div style="cursor: pointer" @click="Selectitem">
                          选择项目
                        </div>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="计划名称" prop="ownerProject">
                    <el-select style="position: relative;top:-4px;" size="small" v-model="transactionForm.plan"
                      placeholder="请选择">
                      <el-option v-for="item in planArr" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="计价方式" prop="pricingMethod">
                    <el-select size="small" v-model="formData.pricingMethod" placeholder="请选择">
                      <el-option v-for="item in jijiaArr" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="计量单位" prop="measureUnit">
                    <el-select size="small" v-model="formData.measureUnit" placeholder="请选择" @change="changeMeasureUnit">
                      <el-option v-for="item in jiliangdawei" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="运量" prop="volume">
                    <el-input size="small" v-model="formData.volume" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="货主单价">
                    <el-input size="small" v-model="formData.ownerUnitPrice" placeholder="请输入金额">
                      <div slot="suffix" style="padding-right: 10px; padding-left: 10px">
                        元
                      </div>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="货主金额">
                    <el-input size="small" v-model="formData.totalAmount" placeholder="请输入金额">
                      <div slot="suffix" style="padding-right: 10px; padding-left: 10px">
                        元
                      </div>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="承运方单价" prop="transUnitPrice">
                    <el-input size="small" v-model="formData.transUnitPrice" placeholder="请输入金额">
                      <div slot="suffix" style="padding-right: 10px; padding-left: 10px">
                        元
                      </div>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="承运方金额" prop="contractorAmount">
                    <el-input size="small" v-model="formData.contractorAmount" placeholder="请输入金额">
                      <div slot="suffix" style="padding-right: 10px; padding-left: 10px">
                        元
                      </div>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
        <!-- 调度信息板块 -->
        <div class="main_item" v-if="type != 2">
          <div class="titleBox">
            <div class="shuxian"></div>
            <div class="title">调度信息</div>
          </div>
          <div class="formItem">
            <el-form :model="formData" :rules="SchedulingRules" ref="SchedulingForm" label-width="117px"
              class="input_form">
              <el-row style="width: 100%">
                <el-col :span="8">
                  <el-col :span="24">
                    <el-form-item label="订单截止时间">
                      <el-date-picker size="small" v-model="formData.endTime" type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="发货时间">
                      <el-date-picker v-model="formData.shippedTime" type="datetime" size="small"
                        value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptionsStart">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="送达时间">
                      <el-date-picker v-model="formData.finishTime" type="datetime" size="small"
                        value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" :picker-options="pickerOptionsEnd">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="承运方" prop="appointSupplierId">
                      <el-input size="small" v-model="transactionForm.Carrier" :readOnly="true" placeholder="请选择承运方">
                        <template slot="append">
                          <div style="cursor: pointer" @click="SelectAccept">
                            选择承运方
                          </div>
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="是否调度司机" prop="isDispatchingDriver">
                      <el-radio-group v-model="SchedulingForm.isDispatchingDriver">
                        <el-radio label="1">是</el-radio>
                        <el-radio label="0">否</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="8">
                  <el-col :span="24">
                    <el-form-item label="车型" prop="carType" class="carTypeSelect">
                      <el-select size="small" placeholder="请选择" v-model="SchedulingForm.carType" @change="changeArr">
                        <el-option v-for="item in carTypeArr" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                      </el-select>
                      <div class="carPicBox" v-show="CarData">
                        <div class="imgBg">
                          <el-image class="carPic" :src="CarData.image" :preview-src-list="[CarData.image]">
                          </el-image>
                        </div>

                        <div class="infoBox">
                          <div class="info_item">
                            <span class="info_item_tit">载重</span>
                            <span class="text">{{ CarData.loads }}吨</span>
                          </div>
                          <div class="info_item">
                            <span class="info_item_tit">长高</span>
                            <span class="info_item_tit">{{ CarData.length }}*{{ CarData.height }}m</span>
                          </div>
                          <div class="info_item">
                            <span class="info_item_tit">载方</span>
                            <span class="text">{{ CarData.capacity }}方</span>
                          </div>
                        </div>
                      </div>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="订单备注" prop="beizhu">
                    <el-input type="textarea" resize="none" :rows="6" class="notesInput" placeholder="请输入内容"
                      v-model="formData.description" maxlength="50" show-word-limit>
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <!-- 调度司机显示 隐藏 -->
                  <el-form-item prop="DispatchingDriver">
                    <div class="addDriverBox" v-show="SchedulingForm.isDispatchingDriver == 1">
                      <div class="addDriverBox_head">
                        <button type="button" class="addDriverBtn" @click="showAddDriverDialog()">
                          <i class="el-icon-plus iconBtn"></i>
                          <span>添加司机</span>
                        </button>
                        <span style="color: #666666; font-size: 12px">
                          该单总运量为<span style="color: #1890ff">{{
                            formData.volume ? formData.volume : 0
                          }}</span>
                        </span>
                      </div>
                      <div class="addDriverTableBox">
                        <el-table class="pointDeparture_table" :data="SchedulingForm.DispatchingDriver" show-summary
                          :header-cell-style="tableHeaderStyle2" :row-class-name="rowStyle"
                          :summary-method="getSummaries">
                          <el-table-column align="left" prop="" width="50" label="序号">
                            <template slot-scope="scope">
                              <div>
                                {{ scope.$index + 1 }}
                              </div>
                            </template>
                          </el-table-column>
                          <el-table-column align="center" label="司机姓名" prop="driverName"></el-table-column>
                          <el-table-column align="center" label="车辆信息">
                            <template slot-scope="scope">
                              <div>
                                {{ scope.row.vehicleInfo }}
                              </div>
                            </template>
                          </el-table-column>
                          <el-table-column align="center" label="运量" prop="cargoWeight">
                            <template slot-scope="scope">
                              <el-input size="small" @change="CalculationResults(scope.row)"
                                v-model="scope.row.cargoWeight">
                              </el-input>
                            </template>
                          </el-table-column>
                          <el-table-column align="center" label="单位">
                            <template slot-scope="scope">
                              <el-select size="small" v-model="scope.row.measureUnit" placeholder="请选择" disabled>
                                <el-option v-for="item in jiliangdawei" :key="item.value" :label="item.label"
                                  :value="item.value">
                                </el-option>
                              </el-select>
                            </template>
                          </el-table-column>
                          <el-table-column label="司机单价(元)" prop="unitPrice">
                            <template slot-scope="scope">
                              <el-input size="small" @change="CalculationResults(scope.row)"
                                v-model="scope.row.unitPrice">
                              </el-input>
                            </template>
                          </el-table-column>
                          <el-table-column align="center" label="司机运费(元)" prop="freight">
                            <template slot-scope="scope">
                              <el-input size="small" v-model="scope.row.freight"> </el-input>
                            </template>
                          </el-table-column>

                          <el-table-column align="center" label="操作">
                            <template slot-scope="scope">
                              <i class="iconfontcolor icon-a-- pointer" @click="addDispatchDriver(scope.$index)"></i>
                            </template>
                          </el-table-column>
                        </el-table>
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
        <div class="main_item" v-if="type == 2">
          <div class="titleBox">
            <div class="shuxian"></div>
            <div class="title">驳回反馈</div>
          </div>
          <div style="height: 20px;"></div>
          <el-upload class="upload-demo" drag multiple :action="url" :show-file-list="false" :headers="headers"
            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
          </el-upload>
          <div style="font-size: 15px;color: #3ebbec;">{{ attachment }}</div>
          <div style="width: 400px; margin-top: 15px">
            <el-input type="textarea" :rows="2" placeholder="请输入反馈备注" v-model="remark">
            </el-input>
          </div>
        </div>
        <!-- 收发货信息板块 -->
        <div class="main_item" v-if="type != 2">
          <div class="titleBox">
            <div class="shuxian"></div>
            <div class="title">收发货信息</div>
          </div>
          <div class="formItem">
            <el-form :model="ShippingReceivingInfoForm" :rules="ShippingReceivingInfoRules" label-width="117px"
              class="input_form">
              <el-row>
                <el-col :span="24">
                  <el-col :span="8">
                    <el-form-item label="选择路线" prop="selection">
                      <el-input size="small" :readOnly="true" v-model="ShippingReceivingInfoForm.selection"
                        placeholder="请选择路线">
                        <template slot="append">
                          <div style="cursor: pointer" @click="Selectline">
                            选择路线
                          </div>
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <!-- <el-col :span="8">
                    <el-form-item label="距离(公里)" prop="Distance">
                      <el-input v-model="ShippingReceivingInfoForm.Distance" :disabled="true"></el-input>
                    </el-form-item>
                  </el-col> -->
                </el-col>

                <el-col :span="24">
                  <el-form-item class="reddian" label="发货地" prop="setOut">
                    <!-- 发货地表格 -->
                    <el-table :data="start" style="width: 100%; border: 1px solid #f0f0f0"
                      :header-cell-style="tableHeaderStyle" :row-class-name="rowStyle">
                      <el-table-column align="left" prop="" width="50" label="序号">
                        <template slot-scope="scope">
                          <div>
                            {{ scope.$index + 1 }}
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="address" align="center">
                        <template slot="header">
                          <div class="beforeRedDian">地址</div>
                        </template>
                        <template slot-scope="scope">
                          <div @click="AddMap(scope.$index, 0, scope.row.address)">
                            <el-input size="small" :readonly="true" v-model="scope.row.address" placeholder="请选择地址">
                            </el-input>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="name" label="详细门牌号" align="center">
                        <template slot-scope="scope">
                          <el-input size="small" v-model="scope.row.detail" placeholder="请输入详细门牌号">
                          </el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="contact" align="center">
                        <template slot="header">
                          <div class="beforeRedDian">联系人</div>
                        </template>
                        <template slot-scope="scope">
                          <el-input size="small" v-model="scope.row.contact" placeholder="请输入联系人">
                          </el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="phone" align="center">
                        <template slot="header">
                          <div class="beforeRedDian">联系电话</div>
                        </template>
                        <template slot-scope="scope">
                          <el-input size="small" v-model="scope.row.phone" placeholder="请输入联系电话">
                          </el-input>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                          <i class="iconfontcolor icon-a- pointer" v-if="scope.$index == 0" @click="addCargo(0)"></i>
                          <i class="iconfontcolor icon-a-- pointer" @click="DeletCargo(scope.$index, 0)" v-else></i>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item class="reddian" label="目的地" prop="setOut">
                    <!-- 发货地表格 -->
                    <el-table :data="end" style="width: 100%; border: 1px solid #f0f0f0"
                      :header-cell-style="tableHeaderStyle" :row-class-name="rowStyle">
                      <el-table-column align="left" prop="" width="50" label="序号">
                        <template slot-scope="scope">
                          <div>
                            {{ scope.$index + 1 }}
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="address" align="center">
                        <template slot="header">
                          <div class="beforeRedDian">地址</div>
                        </template>
                        <template slot-scope="scope">
                          <div @click="AddMap(scope.$index, 1, scope.row.address)">
                            <el-input size="small" :readonly="true" v-model="scope.row.address" placeholder="请选择地址">
                            </el-input>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="name" label="详细门牌号" align="center">
                        <template slot-scope="scope">
                          <el-input size="small" v-model="scope.row.detail" placeholder="请输入详细门牌号">
                          </el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="contact" align="center">
                        <template slot="header">
                          <div class="beforeRedDian">联系人</div>
                        </template>
                        <template slot-scope="scope">
                          <el-input size="small" v-model="scope.row.contact" placeholder="请输入联系人">
                          </el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="phone" align="center">
                        <template slot="header">
                          <div class="beforeRedDian">联系电话</div>
                        </template>
                        <template slot-scope="scope">
                          <el-input v-model="scope.row.phone" placeholder="请输入联系电话">
                          </el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="phone" label="货物明细" align="center">
                        <template slot-scope="scope">
                          <div style="font-size: 20px">
                            <el-button type="text" size="small" @click="cargoVisible(scope.$index)"
                              style="font-size: 15px">编辑货物明细</el-button>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                          <i class="iconfontcolor icon-a- pointer" v-if="scope.$index == 0" @click="addCargo(1)"></i>
                          <i class="iconfontcolor icon-a-- pointer" @click="DeletCargo(scope.$index, 1)" v-else></i>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <div class="footerControlBox">
      <el-button class="cancelBtn" @click="$router.push('/orderManagement/CarrierOrder')">取消</el-button>
      <el-button class="submitBtn" type="primary" @click="submit" v-if="type != 2">提交</el-button>
      <el-button class="submitBtn" type="primary" @click="submittype" v-else>提交</el-button>

    </div>

    <!-- 添加司机弹框 -->
    <el-dialog title="添加司机" :visible.sync="addDriverVisible" width="840px" class="addDriver_dialog">
      <div class="titleBox">
        <div class="title">承运方当前可调动司机：</div>
      </div>
      <el-row class="flex-fpkp">
        <el-col :md="10" class="ipt-qym">
          <el-input v-model="driverNameQuery" placeholder="请输入司机名称" clearable>
          </el-input>
        </el-col>
        <el-col class="cxbt">
          <el-button type="primary" @click="queryDriver()">查询</el-button>
        </el-col>
      </el-row>
      <div class="dialog_list">
        <el-table :data="driverDetailsData" style="width: 100%" header-align="left"
          :row-style="{ color: '#595959', fontSize: '12px' }" ref="registTable">
          <el-table-column align="left" type="selection" width="50"></el-table-column>
          <el-table-column align="left" prop="" width="50" label="序号">
            <template slot-scope="scope">
              <div>
                {{ scope.$index + 1 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="driverPic" label="司机照片">
            <template slot-scope="scope">
              <div class="driverPicBox">
                <el-image style="width: 65px; height: 48px" :src="scope.row.driverPhoto"
                  :preview-src-list="[scope.row.driverPhoto]">
                </el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" label="司机姓名">
            <template slot-scope="scope">
              <el-popover placement="bottom-start" width="505" trigger="click" class="popover"
                @show="diverShow(scope.row.driverId)">
                <!-- 司机信息和车辆信息 -->
                <div class="BulletBox" v-if="diverMood">
                  <div class="info_item">
                    <div class="titleBox">
                      <div class="icon-xinxi iconfontcolor"></div>
                      <h3 class="title">司机信息</h3>
                      <div class="line"></div>
                    </div>
                    <el-descriptions class="driverCarInfo" :column="2" :labelStyle="{
                      color: '#939393',
                      fontSize: '12px',
                      fontWeight: 'bold',
                      marginRight: '20px',
                    }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
                      <el-descriptions-item label="司机姓名">{{
                        diverMood.driverName
                      }}</el-descriptions-item>
                      <el-descriptions-item label="准驾车型">{{
                        diverMood.licenseLevel.message
                      }}</el-descriptions-item>
                      <el-descriptions-item label="身份证号">{{
                        diverMood.idCard
                      }}</el-descriptions-item>
                      <el-descriptions-item label="司机年龄">{{
                        scope.row.age
                      }}</el-descriptions-item>
                    </el-descriptions>
                  </div>
                  <div class="info_item">
                    <div class="titleBox">
                      <div class="icon-xinxi iconfontcolor"></div>
                      <h3 class="title">车辆信息</h3>
                      <div class="line"></div>
                    </div>
                    <el-descriptions class="driverCarInfo" :column="2" :labelStyle="{
                      color: '#939393',
                      fontSize: '12px',
                      fontWeight: 'bold',
                      marginRight: '20px',
                    }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
                      <el-descriptions-item label="车辆类型">{{
                        diverMood.vehicleType
                      }}</el-descriptions-item>
                      <el-descriptions-item label="车牌号">{{
                        diverMood.numberplate
                      }}</el-descriptions-item>
                      <el-descriptions-item label="品牌型号">{{
                        diverMood.brandModel
                      }}</el-descriptions-item>
                      <el-descriptions-item label="规格">{{
                        diverMood.specification
                      }}</el-descriptions-item>
                      <el-descriptions-item label="参数">{{
                        diverMood.diverMood
                      }}</el-descriptions-item>
                    </el-descriptions>
                  </div>
                </div>
                <div class="driverNameBox" slot="reference">
                  <div class="driverName">{{ scope.row.driverName }}</div>
                  <i class="iconfont icon-info"></i>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="age" label="年龄" width="60">
          </el-table-column>
          <el-table-column align="left" prop="phoneNumber" label="联系电话">
          </el-table-column>
          <el-table-column align="left" prop="numberplate" label="绑定车辆">
          </el-table-column>
          <el-table-column align="left" prop="vehicleType" label="准驾车型" width="80">
          </el-table-column>
        </el-table>
      </div>

      <div class="dialog_footer">
        <el-button class="cancelBtn2" @click="addDriverVisible = false">取 消</el-button>
        <el-button class="submitBtn2" type="primary" @click="driverVerify">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 货物明细弹框 -->
    <el-dialog title="货物明细" :visible.sync="cargoDetailsVisible" width="1000px" class="cargoDetails_dialog">
      <div class="head">
        <el-upload ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :before-upload="upload"
          :show-file-list="false" accept=".xlsx,.xls" style="width: 150px; display: inline-flex">
          <el-button class="importBtn" type="primary">导入excel文档</el-button>
        </el-upload>
        <el-button class="importBtn1" type="warning" @click="Download">下载excel模板</el-button>
        <el-button class="importBtn1" type="success" @click="AddHuo">添加货物信息</el-button>
      </div>

      <div class="tableBox">
        <el-table class="cargoDetails_table" :data="end[EndIndex].orderCargoDetails"
          :header-row-style="{ height: '40px', backgroundColor: 'red' }"
          :row-style="{ color: '#666666', fontSize: '12px' }">
          <el-table-column align="left" prop="" width="50" label="序号">
            <template slot-scope="scope">
              <div>
                {{ scope.$index + 1 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="大类">
            <template slot-scope="scope">
              <el-select v-model="scope.row.cargoType" placeholder="请选择">
                <el-option v-for="item in LargeCategoryArr" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="货物名称">
            <template slot-scope="scope">
              <el-input v-model="scope.row.cargoName"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="运量">
            <template slot-scope="scope">
              <el-input v-model="scope.row.cargoWeight"> </el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="品牌">
            <template slot-scope="scope">
              <el-input v-model="scope.row.brand"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="规格">
            <template slot-scope="scope">
              <el-input v-model="scope.row.cargoVolume"> </el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="数量">
            <template slot-scope="scope">
              <el-input v-model="scope.row.cargoQuantity"> </el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="备注">
            <template slot-scope="scope">
              <el-input v-model="scope.row.description"> </el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <i class="iconfontcolor icon-a-- pointer" @click="DeleteIndex(scope.$index)"></i>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="dialog_footer">
        <el-button class="cancelBtn3" @click="cargoDetailsVisible = false">取消</el-button>
        <el-button class="submitBtn3" type="primary" @click="cargoDetailsVisible = false">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="货主信息" :visible.sync="DialogVisible" center class="fpkp-dialog">
      <el-row class="flex-fpkp">
        <el-col :md="10" class="ipt-qym">
          <el-input placeholder="请输入货主名" clearable v-model="CargoOwnerValue">
          </el-input>
        </el-col>
        <el-col class="cxbt">
          <el-button type="primary" @click="qyxz('货主信息')">查询</el-button>
        </el-col>
      </el-row>
      <!-- 无数据时显示 -->
      <div class="null-png" v-if="cargoemood.length == 0">
        <div>
          <img src="/null.png" alt="" />
          <p>暂无数据</p>
        </div>
      </div>
      <el-table v-else class="xzc" style="width: 100%; overflow-y: scroll; height: 500px" :data="cargoemood"
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
        }" highlight-current-row row-class-name="row-class">
        <el-table-column prop="name" label="货主名称" align="center"></el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作按钮" align="center">
          <template slot-scope="scope">
            <div class="cmd-bt-config">
              <el-button type="primary" style="margin-bottom: 10px" @click="cargoeXuan(scope.row)">选择</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="block">
        <el-pagination layout="prev, pager, next" :total="50" @current-change="xzxc">
        </el-pagination>
      </div> -->
    </el-dialog>

    <el-dialog title="项目信息" :visible.sync="DialogItem" center class="fpkp-dialog">
      <el-row class="flex-fpkp">
        <el-col :md="10" class="ipt-qym">
          <el-input placeholder="请输入项目名" clearable v-model="projectNameValue">
          </el-input>
        </el-col>
        <el-col class="cxbt">
          <el-button type="primary" @click="qyxz('项目信息')">查询</el-button>
        </el-col>
      </el-row>
      <!-- 无数据时显示 -->
      <div class="null-png" v-if="itemmood.length == 0">
        <div>
          <img src="/null.png" alt="" />
          <p>暂无数据</p>
        </div>
      </div>
      <el-table v-else class="xzc" style="width: 100%; overflow-y: scroll; height: 500px" :data="itemmood"
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
        }" highlight-current-row row-class-name="row-class">
        <el-table-column prop="name" label="项目名称" align="center"></el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作按钮" align="center">
          <template slot-scope="scope">
            <div class="cmd-bt-config">
              <el-button type="primary" style="margin-bottom: 10px" @click="ItemXuan(scope.row)">选择</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="block">
        <el-pagination layout="prev, pager, next" :total="50" @current-change="xzxc">
        </el-pagination>
      </div> -->
    </el-dialog>

    <el-dialog title="供应商信息" :visible.sync="DialogAccept" center class="fpkp-dialog">
      <el-row class="flex-fpkp">
        <el-col :md="10" class="ipt-qym">
          <el-input v-model="supplierNameValue" placeholder="请输入承运方名称" clearable> </el-input>
        </el-col>
        <el-col class="cxbt">
          <el-button type="primary" @click="qyxz('供应商信息')">查询</el-button>
        </el-col>
      </el-row>
      <!-- 无数据时显示 -->
      <div class="null-png" v-if="Acceptmood.length == 0">
        <div>
          <img src="/null.png" alt="" />
          <p>暂无数据</p>
        </div>
      </div>
      <el-table v-else class="xzc" style="width: 100%; overflow-y: scroll; height: 500px" :data="Acceptmood"
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
        }" highlight-current-row row-class-name="row-class">
        <el-table-column prop="supplierName" label="供应商名称" align="center"></el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作按钮" align="center">
          <template slot-scope="scope">
            <div class="cmd-bt-config">
              <el-button type="primary" style="margin-bottom: 10px" @click="AcceptXuan(scope.row)">查看供应商车队</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="block">
        <el-pagination layout="prev, pager, next" :total="50" @current-change="xzxc">
        </el-pagination>
      </div> -->
    </el-dialog>

    <el-dialog title="车队信息" :visible.sync="DialogAcceptList" center class="fpkp-dialog">
      <el-row class="flex-fpkp">
        <el-col :md="10" class="ipt-qym">
          <el-input v-model="fleetNameValue" placeholder="请输入车队名称" clearable> </el-input>
        </el-col>
        <el-col class="cxbt">
          <el-button type="primary" @click="qyxz('车队信息')">查询</el-button>
        </el-col>
      </el-row>
      <!-- 无数据时显示 -->
      <div class="null-png" v-if="DialogAcceptmood.length == 0">
        <div>
          <img src="/null.png" alt="" />
          <p>暂无数据</p>
        </div>
      </div>
      <el-table v-else class="xzc" style="width: 100%; overflow-y: scroll; height: 500px" :data="DialogAcceptmood"
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
        }" highlight-current-row row-class-name="row-class">
        <el-table-column prop="fleetName" label="承运方名称" align="center"></el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作按钮" align="center">
          <template slot-scope="scope">
            <div class="cmd-bt-config">
              <el-button type="primary" style="margin-bottom: 10px" @click="AcceptListXuan(scope.row)">选择</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="block">
        <el-pagination layout="prev, pager, next" :total="50" @current-change="xzxc">
        </el-pagination>
      </div> -->
    </el-dialog>

    <el-dialog title="选择路线" :visible.sync="DialogLine" center class="fpkp-dialog">
      <!-- 无数据时显示 -->
      <!-- <div class="null-png" v-if="Linemood.length == 0">
        <div>
          <img src="/null.png" alt="" />
          <p>暂无数据</p>
        </div>
      </div> -->
      <div class="controlLine">
        <div class="inputItem">
          <div class="title">路线名称</div>
          <div class="inputBox">
            <el-input v-model="searchLineName" @keyup.enter.native="Selectline">
            </el-input>
          </div>
        </div>
        <el-button type="primary" size="small" icon="el-icon-search" @click="Selectline">查询</el-button>
        <el-button type="plain" size="small" icon="el-icon-refresh-right" @click="clearSelectline">清空</el-button>
      </div>

      <el-table class="xzc" style="width: 100%; overflow-y: scroll; height: 500px" :data="Linemood" :header-cell-style="{
        background: '#f5f7fa',
        color: '#606266',
      }" highlight-current-row row-class-name="row-class">
        <el-table-column prop="lineName" label="名称" align="center"></el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作按钮" align="center">
          <template slot-scope="scope">
            <div class="cmd-bt-config">
              <el-button type="primary" style="margin-bottom: 10px" @click="LineXuan(scope.row)">选择</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="block">
        <el-pagination layout="prev, pager, next" :total="50" @current-change="xzxc">
        </el-pagination>
      </div> -->
    </el-dialog>

    <el-dialog title="线路信息" :visible.sync="DialogMap" center class="fpkp-dialog" width="50%">
      <div>
        <iframe src="/orderMap.html" ref="iframe" frameborder="0" id="iframetest" width="100%" height="500"></iframe>
      </div>

      <div class="dialog_footer" style="width: 100%; display: flex; justify-content: flex-end;margin-top: 15px;">
        <el-button class="cancelBtn3" @click="DialogMap = false">取消</el-button>
        <el-button class="submitBtn3" type="primary" @click="serMap">保存</el-button>
      </div>
    </el-dialog>

    <iframe src="/orderMap.html" ref="iframeTwo" frameborder="0" id="iframetest" width="0" height="0"></iframe>
  </div>
</template>

<script>
import breadcrumb from "@/components/breadcrumb.vue";
import httpApi from "@/http";
import BaseUrl from "@/http/BaseUrl";
import { read, utils } from "xlsx";
import cargoOwnerApi from "@/http/apis/cargoOwner";
export default {
  data() {
    return {
      url: BaseUrl.UPLOADURL + "/file/upload",
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      driverNameQuery: "",//添加司机弹框 搜索司机
      CargoOwnerValue: "",  //货主信息 搜索货主
      projectNameValue: "",//项目信息 搜索项目名称
      supplierNameValue: "",//供应商信息 搜索供应商名称
      fleetNameValue: "",//车队信息 搜索 承运方名称
      supplierIdValue: "",
      searchLineName: "",

      // 发货时间限制  发货时间不大于送达时间
      // <!-- formData.shippedTime  formData.finishTime-->

      pickerOptionsStart: {
        disabledDate: (time) => {
          if (this.formData.finishTime) {
            return (
              time.getTime() < Date.now() - 8.64e7 ||
              time.getTime() >
              new Date(this.formData.finishTime).getTime() -
              1 * 24 * 60 * 60 * 1000
            );
          }
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      pickerOptionsEnd: {
        disabledDate: (time) => {
          return (
            time.getTime() < Date.now() - 8.64e7 ||
            time.getTime() <
            new Date(this.formData.finishTime).getTime() +
            1 * 24 * 60 * 60 * 1000
          );
        },
      },

      // key: "",
      DialogLine: false,
      DialogCar: false,
      DialogMap: false,
      DialogVisible: false,
      DialogItem: false,
      DialogAccept: false,
      DialogAcceptList: false,
      addDriverVisible: false, //添加司机弹框
      cargoDetailsVisible: false, //货物明细弹框
      cargoemood: [],
      itemmood: [],
      Acceptmood: [],
      Carmood: [],
      DialogAcceptmood: [],
      Linemood: [],
      // 交易信息 表单数据
      transactionForm: {
        huozhu: "",
        name: "",
        jijia: "",
        plan: "",
        jiliang: "",
        yunliang: "",
        danjia: "",
        money: "",
        carrierUunitPrice: "",
        carrierMoney: "",
      },
      transactionRules: {
        huozhu: [
          { required: true, message: "请点击右侧选择", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入", trigger: "blur" }],
        plan: [{ required: true, message: "请输入", trigger: "blur" }],
        jijia: [{ required: true, message: "请输入", trigger: "blur" }],
        jiliang: [{ required: true, message: "请输入", trigger: "blur" }],
        yunliang: [{ required: true, message: "请输入", trigger: "blur" }],
        danjia: [{ required: true, message: "请输入", trigger: "blur" }],
        money: [{ required: true, message: "请输入", trigger: "blur" }],
        carrierUunitPrice: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        carrierMoney: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      // 调度信息 表单数据
      SchedulingForm: {
        overTime: "",
        fahuoTime: "",
        shouHuoTime: "",
        Carrier: "",
        isDispatchingDriver: "1",
        DispatchingDriver: [],
        carType: "",
        beizhu: "",
      },
      //收发货信息
      ShippingReceivingInfoForm: {
        selection: "",
        Distance: "8",
        sendOut: [],
        destination: [],
      },
      ShippingReceivingInfoRules: {},
      // 货物明细
      LargeCategoryArr: [
        { value: 1, label: "建材" },
        { value: 2, label: "建材2" },
      ],
      jiliang: "",
      jiliangArr: [],
      jijia: "",
      sreaChont:1,
      driverMood:[],
      jijiaArr: [
        { value: 1, label: "按里程" },
        { value: 2, label: "按量" },
      ],
      jiliangdawei: [
        { value: 1, label: "车" },
        { value: 2, label: "吨" },
        { value: 3, label: "件" },
      ],
      plan: "",
      planArr: [],
      CarrierArr: [],
      carTypeArr: [],
      driverDetailsData: [],
      SchedulingRules: {
        // carType:[
        //   { required: true, message: "请保持信息完整", trigger: "change" },
        // ],
        ownerId: [
          { required: true, message: "请保持信息完整", trigger: "change" },
        ],
        projectId: [
          { required: true, message: "请保持信息完整", trigger: "change" },
        ],
        pricingMethod: [
          { required: true, message: "请保持信息完整", trigger: "change" },
        ],
        // ownerProject: [
        //   { required: true, message: "请保持信息完整", trigger: "blur" },
        // ],
        measureUnit: [
          { required: true, message: "请保持信息完整", trigger: "change" },
        ],
        volume: [
          { required: true, message: "请保持信息完整", trigger: "blur" },
        ],
        transUnitPrice: [
          { required: true, message: "请保持信息完整", trigger: "blur" },
        ],
        totalAmount: [
          { required: true, message: "请保持信息完整", trigger: "blur" },
        ],
        ownerUnitPrice: [
          { required: true, message: "请保持信息完整", trigger: "blur" },
        ],
        contractorAmount: [
          { required: true, message: "请保持信息完整", trigger: "blur" },
        ],
        endTime: [
          { required: true, message: "请保持信息完整", trigger: "change" },
        ],
        finishTime: [
          { required: true, message: "请保持信息完整", trigger: "change" },
        ],
        shippedTime: [
          { required: true, message: "请保持信息完整", trigger: "change" },
        ],
        appointSupplierId: [
          { required: true, message: "请保持信息完整", trigger: "blur" },
        ],
        description: [
          { required: true, message: "请保持信息完整", trigger: "blur" },
        ],
        categoryId: [
          { required: true, message: "请保持信息完整", trigger: "blur" },
        ],
        lineId: [
          { required: true, message: "请保持信息完整", trigger: "blur" },
        ],
      },

      formData: {
        ownerId: "", //货主ID
        projectId: "", //项目ID
        pricingMethod: "", //计价方式
        ownerProject: "", //计划名称
        measureUnit: "", //计量单位
        volume: "", //运量
        transUnitPrice: "", //承运方单价
        totalAmount: "", //货主金额
        ownerUnitPrice: "", //货主单价
        contractorAmount: "", //承运人金额
        endTime: "", //截止时间
        finishTime: "", //送达时间
        shippedTime: "", //发货时间
        appointSupplierId: "", //承运方Id
        description: "", //订单备注描述
        categoryId: "", //车型需要Id
        allotState: "1", //是否调度司机 0否1是
        //调度司机集合
        orderDispatches: [
          {
            cargoWeight: "", //运量
            driverId: "", //司机Id
            freight: "", //司机运费
            unitPrice: "", //司机单价
          },
        ],
        lineId: "", //线路ID
        startAddress: [], //发货地
        endAddress: [], //目的地
      },
      creadMood: [],
      CarData: "",
      diverMood: "",
      start: [
        {
          address: "",
          contact: "",
          phone: "",
          lat: "",
          lng: "",
        },
      ],
      end: [
        {
          address: "",
          contact: "",
          phone: "",
          lat: "",
          lng: "",
          orderCargoDetails: [],
        },
      ],
      iframeWin: {}, //Map返回值
      SatrIndex: 0,
      EndIndex: 0,
      compute: false,
      orderId: this.$route.query.id,
      issubmit: false,

      type: '',
      attachment: '',
      remark: '',//反馈备注
    };
  },
  created() {
    if (this.$route.query.type) {
      this.type = this.$route.query.type;
    }
    this.cread();
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.attachment = res.data.url;
      console.log(this.attachment)
    },
    beforeAvatarUpload(file) {

    },
    tableHeaderStyle({ row, column, rowIndex, columnIndex }) {
      return 'font-size:12px;fontWweight:bold;color:#262626;backgroundColor:#F5F5F5;borderColor:#DDDDDD;height:40px;paddingTop:0px;paddingBottom:0px;'
    },
    tableHeaderStyle2({ row, column, rowIndex, columnIndex }) {
      return 'font-size:12px;fontWweight:bold;color:#262626;backgroundColor:#F0F6FC;borderColor:#DDDDDD;height:40px;paddingTop:0px;paddingBottom:0px;'
    },
    rowStyle({ row, rowIndex }) {
      return 'tableRowStyleName'
    },
    // 计量单位变化时,表格的单位也变化
    changeMeasureUnit(val) {
      this.SchedulingForm.DispatchingDriver.forEach((item, i) => {
        item.measureUnit = this.formData.measureUnit;
      });
    },
    serMap() {
      let dataMap = this.$refs.iframe.contentWindow.ToManualRoamFunc();
      console.log(dataMap);
      this.DialogMap = false;
      if (this.judgment == 0) {
        for (let k in dataMap) {
          this.start[this.SatrIndex][k] = dataMap[k];
        }
      } else {
        for (let k in dataMap) {
          this.end[this.EndIndex][k] = dataMap[k];
        }
      }
    },
    //添加地址
    AddMap(e, i, z) {
      let that = this;
      if (i == 0) {
        this.SatrIndex = e;
      } else {
        this.EndIndex = e;
      }
      this.judgment = i;
      this.DialogMap = true;
      setTimeout(() => {
        that.$refs.iframe.contentWindow.VueMap(z);
      }, 1000);
    },

    //删除地址
    DeletCargo(e, i) {
      if (i == 0) {
        this.start.forEach((item, i) => {
          if (i == e) {
            this.start.splice(i, 1);
          }
        });
      } else {
        this.end.forEach((item, i) => {
          if (i == e) {
            this.end.splice(i, 1);
          }
        });
      }
    },
    //追加地址数据
    addCargo(e) {
      if (e == 0) {
        this.start.push({
          address: "",
          name: "",
          phone: "",
        });
      } else {
        this.end.push({
          address: "",
          name: "",
          phone: "",
          orderCargoDetails: [],
        });
      }
    },

    //货物明细
    cargoVisible(e) {
      this.EndIndex = e;
      this.cargoDetailsVisible = true;
    },
    //下载模板
    Download() {
      const a = document.createElement("a");
      a.href = "/huowu.xlsx";
      a.download = "huowu.xlsx";
      a.style.display = "none";
      document.body.appendChild(a);
      a.click();
      a.remove();
    },
    //添加货物
    AddHuo() {
      this.end[this.EndIndex].orderCargoDetails.push({
        cargoType: "", //大类
        cargoName: "", //名称
        cargoWeight: "", //运量cargoWeight
        brand: "", //品牌
        cargoVolume: "", //规格
        cargoQuantity: "", //货物数量
        description: "", //备注
      });
    },
    //删除货物行
    DeleteIndex(e) {
      this.end[this.EndIndex].orderCargoDetails.forEach((item, i) => {
        if (i == e) {
          this.end[this.EndIndex].orderCargoDetails.splice(i, 1);
        }
      });
    },
    //导入excel文档
    upload(file, fileList) {
      let files = { 0: file };
      this.readExcel1(files);
    },
    // 获取导入excel文档的数据
    readExcel1(files) {
      var that = this;
      // console.log(files);
      // 此处判断不严谨，思路只是根据传入的参数校验数据的完整性，可根据自己需求修改
      // 如果没有文件名
      if (files.length <= 0) {
        return;
      }
      if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
        this.$Message.error("上传格式不正确，请上传xls或者xlsx格式");
        return;
      }
      const fileReader = new FileReader();
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result;
          const workbook = read(data, {
            type: "binary",
          });
          const wsname = workbook.SheetNames[0];
          const ws = utils.sheet_to_json(workbook.Sheets[wsname]);
          let cont = JSON.stringify(ws)
            .replace(/编号/g, "cid")
            .replace(/货主（必填）/g, "ownerName")
            .replace(/项目名称（必填）/g, "projectName")
            .replace(/计量单位（必填）/g, "measureUnit")
            .replace(/计价方式（必填）/g, "pricingMethod")
            .replace(/运量（必填）/g, "cargoWeight")
            .replace(/货主单价/g, "ownerUnitPrice")
            .replace(/货主金额/g, "totalAmount")
            .replace(/司机单价（必填）/g, "unitPrice")
            .replace(/司机运费（必填）/g, "freight")
            .replace(/发货地省市区（必填）/g, "start")
            .replace(/发货地详细地址（必填）/g, "startAddress")
            .replace(/发货地联系人（必填）/g, "startMan")
            .replace(/发货地联系人电话（必填）/g, "startphone")
            .replace(/目的地省市（必填）/g, "end")
            .replace(/目的地详细地址（必填）/g, "endAddress")
            .replace(/目的地联系人（必填）/g, "endMan")
            .replace(/目的地联系人电话（必填）/g, "endphone")
            .replace(/司机名称（必填）/g, "dirver")
            .replace(/司机电话（必填）/g, "dirverphone")
            .replace(/司机运量（必填）/g, "cargoWeight")
            .replace(/司机单价（必填）/g, "unitPrice")
            .replace(/司机运费（必填）/g, "freight")
            .replace(/货物类别/g, "leibie")
            .replace(/货物名称/g, "name")
            .replace(/货物数量/g, "number")
            .replace(/品牌/g, "pinpai")
            .replace(/货物规格/g, "guige")
            .replace(/运量/g, "yunliang")
            .replace(/备注/g, "remak")
            .replace(/订单截止时间/g, "endTime")
            .replace(/发货时间/g, "statyTime")
            .replace(/送达时间/g, "shouTime")
          cont = JSON.parse(cont)
          let map = [];
          let res = [];

          cont.forEach(item => {
            if (map.indexOf(item.cid) < 0) {
              res.push({
                cid: item.cid,
                oid: [item]
              })
              map.push(item.cid);
            } else {
              res.forEach(obj => {
                if (obj.cid == item.cid) {
                  obj.oid.push(item)
                }
              })
            }
          })
          let fromMood = []
          res.forEach((item, i) => {
            item.oid.forEach((meth, k) => {
              if (k == 0) {
                fromMood.push({
                  cid: item.cid,
                  ownerName: meth.ownerName,
                  projectName: meth.projectName,
                  measureUnit: meth.measureUnit,
                  pricingMethod: meth.pricingMethod,
                  cargoWeight: meth.cargoWeight,
                  ownerUnitPrice: meth.ownerUnitPrice,
                  totalAmount: meth.totalAmount,
                  unitPrice: meth.unitPrice,
                  freight: meth.freight,
                  startAddress: [],
                  endAddress: [],
                  drivers: [],
                  cargo: [],
                  shippedTime: meth.statyTime,
                  endTime: meth.endTime,
                  finishTime: meth.shouTime,
                })
                fromMood.forEach(key => {
                  if (key.cid == item.cid) {
                    if (meth.start != undefined) {
                      key.startAddress.push({ province: meth.start, address: meth.startAddress, contact: meth.startMan, phone: meth.startphone })
                    }
                    if (meth.end != undefined) {
                      key.endAddress.push({ province: meth.end, address: meth.endAddress, contact: meth.endMan, phone: meth.endphone })
                    }
                    if (meth.dirver != undefined) {
                      key.drivers.push({ driverName: meth.dirver, phone: meth.dirverphone })
                    }
                    if (meth.leibie != undefined) {
                      key.cargo.push({
                        cargoName: meth.leibie,
                        cargoType: meth.name,
                        cargoQuantity: meth.number,
                        cargoWeight: meth.yunliang,
                        description: meth.remak,
                        brand: meth.pinpai,
                        cargoVolume: meth.guige,
                      })
                    }
                  }
                })
              } else {
                fromMood.forEach(key => {
                  if (key.cid == item.cid) {
                    if (meth.end != undefined) {
                      key.endAddress.push({ province: meth.end, address: meth.endAddress, contact: meth.endMan, phone: meth.endphone })
                    }
                    if (meth.dirver != undefined) {
                      key.drivers.push({ driverName: meth.dirver, phone: meth.dirverphone, unitPrice: meth.unitPrice, cargoWeight: meth.cargoWeight, freight: meth.cargoWeight })
                    }
                    if (meth.leibie != undefined) {
                      key.cargo.push({
                        cargoName: meth.leibie,
                        cargoType: meth.name,
                        cargoQuantity: meth.number,
                        cargoWeight: meth.yunliang,
                        description: meth.remak,
                        brand: meth.pinpai,
                        cargoVolume: meth.guige,
                      })
                    }
                  }
                })
              }
            })
          })
          this.$http.cargoOwnerApi.batchCreateOrder(fromMood).then((res) => {
            if (res.data.code == 200) {
              this.$message.success('操作成功')
              this.getList();
            }
          })
        } catch (e) {
          return false;
        }
      };

      fileReader.readAsBinaryString(files[0]);
    },
    clearSelectline() {
      this.searchLineName = ''
      this.Selectline()
    },

    //拿线路信息
    async Selectline() {
      if (!this.formData.ownerId) {
        this.$message.error("请先选择货主");
        return false;
      }
      let res = await this.$http.SettlementDocApi.userLineDownList({
        ownerId: this.formData.ownerId,
        lineName: this.searchLineName
      });
      this.Linemood = res.data.data;
      this.DialogLine = true;
    },

    //选择线路
    async LineXuan(e) {
      this.formData.lineId = e.lineId;
      this.ShippingReceivingInfoForm.selection = e.lineName;
      let res = await this.$http.SettlementDocApi.userLineAddressList(
        this.formData.lineId
      );
      let mood = JSON.parse(JSON.stringify(res.data.data));
      // console.log("res=", res);
      this.start = [];
      this.end = [];
      mood.forEach((item, i) => {
        if (item.addressType == 0) {
          this.start.push(item);
        } else {
          item.orderCargoDetails = [];
          this.end.push(item);
        }
      });

      if (this.end.length == 0) {
        this.end = [
          {
            address: "",
            name: "",
            phone: "",
            orderCargoDetails: [],
          },
        ];
      }
      if (this.start.length == 0) {
        this.start = [
          {
            address: "",
            name: "",
            phone: "",
          },
        ];
      }

      this.DialogLine = false;
    },

    //司机详情信息
    async diverShow(e) {
      let res = await this.$http.SettlementDocApi.queryDriverAndVehicleDetail({
        driverId: e,
      });
      this.diverMood = res.data.data;
    },
    //拿车型信息
    changeArr(e) {
      console.log(this.carTypeArr);
      this.CarData = this.creadMood[e];
      console.log(this.creadMood[e].categoryId);
      this.SchedulingForm.carType = this.creadMood[e].categoryId + ""
      this.formData.categoryId = this.creadMood[e].categoryId + "";

    },
    //搜索查询
    qyxz(e) {
      /* supplierName */
      if (e == '货主信息') {
        this.Selectcargoe();
      } else if (e == '项目信息') {
        this.Selectitem();
      } else if (e == '供应商信息') {//选择承运方
        this.SelectAccept();
      } else if (e == '车队信息') {//承运名称 即车队名称
        this.AcceptXuan();
      }

    },

    //拿货主信息


    async Selectcargoe() {
      let res = await httpApi.SettlementDocApi.dropDownByOrder({
        name: this.CargoOwnerValue,
      });
      this.cargoemood = res.data.data.records;
      this.DialogVisible = true;
      // console.log(this.cargoemood);
    },
    //选择货主
    cargoeXuan(e) {
      this.transactionForm.huozhu = e.name;
      this.formData.ownerId = e.ownerId;
      this.DialogVisible = false;
      this.transactionForm.name = "";
      this.formData.projectId = "";
      this.formData.lineId = "";
      this.ShippingReceivingInfoForm.selection = "";
      this.transactionForm.Carrier = "";
      this.formData.appointSupplierId = "";
      // this.key = "";
    },

    //拿项目信息
    async Selectitem() {
      if (!this.transactionForm.huozhu) {
        this.$message.error("请先选择货主");
        return false;
      }
      let res = await httpApi.SettlementDocApi.project_down({
        ownerId: this.formData.ownerId,
        keyword: this.projectNameValue,
      });

      this.itemmood = res.data.data;
      // console.log(this.itemmood);

      this.DialogItem = true;
    },
    //选择项目
    ItemXuan(e) {
      this.transactionForm.name = e.name;
      this.formData.projectId = e.projectId;
      this.DialogItem = false;
      // this.key = "";
    },

    //承运方信息
    async SelectAccept() {
      let res = await httpApi.SettlementDocApi.listPullDown({
        supplierName: this.supplierNameValue,
      });
      this.Acceptmood = res.data.data.records;
      this.DialogAccept = true;
    },
    //选择
    async AcceptXuan(val) {
      console.log(val)
      if (val != undefined) {
        this.supplierIdValue = val.supplierId
      }
      let res = await httpApi.SettlementDocApi.fleetlistPullDown({
        supplierId: this.supplierIdValue,
        fleetName: this.fleetNameValue,
      });
      this.DialogAcceptmood = res.data.data.records;
      this.DialogAcceptList = true;
      // this.key = "";
    },
    AcceptListXuan(e) {
      this.transactionForm.Carrier = e.fleetName;
      this.formData.appointSupplierId = e.fleetId;
      this.DialogAcceptList = false;
      this.DialogAccept = false;
      // this.key = "";
    },

    async cread() {
      let res = await this.$http.SettlementDocApi.get_vehicle_model_list();
      let mood = res.data.data.homeVehicleModelVoList;
      this.carTypeArr = [];
      this.creadMood = mood;
      mood.forEach((item, i) => {
        this.carTypeArr.push({ value: item.categoryId, label: item.name });
      });
      if (this.orderId) {
        let res1 = await httpApi.cargoOwnerApi.getAcceptCarriageUpdatedetail({
          orderId: this.$route.query.id,
        });
        // console.log(res1.data.data);
        this.transactionForm.huozhu = res1.data.data.cargoName;
        this.transactionForm.name = res1.data.data.projectName;
        this.transactionForm.Carrier = res1.data.data.fleetName;
        this.ShippingReceivingInfoForm.selection = res1.data.data.lineName;
        this.start = res1.data.data.startAddress;
        this.end = res1.data.data.endAddress;
        for (let k in res1.data.data) {
          this.formData[k] = res1.data.data[k];
        }
        console.log(this.creadMood);
        this.creadMood.map((item, index) => {
          if (item.categoryId == this.formData.categoryId) {
            this.SchedulingForm.carType = index + "";
            this.changeArr(index);
          }
        });
        this.SchedulingForm.DispatchingDriver = this.formData.orderDispatches;
        this.changeMeasureUnit();
        if (this.formData.orderDispatches.length > 0) {
          this.SchedulingForm.isDispatchingDriver = "1";
        } else {
          this.SchedulingForm.isDispatchingDriver = "0";
        }

        // console.log(this.carTypeArr);
      } else {
        if (this.$store.state.orderData) {
          let orderData = this.$store.state.orderData;
          // console.log(orderData);
          this.formData = orderData.formData;
          this.transactionForm = orderData.transactionForm;
          this.SchedulingForm = orderData.SchedulingForm;
          this.ShippingReceivingInfoForm = orderData.ShippingReceivingInfoForm;
          this.start = orderData.start;
          this.end = orderData.end;
          if (this.formData.categoryId) {
            this.creadMood.map((item, index) => {
              if (item.categoryId == this.formData.categoryId) {
                this.SchedulingForm.carType = index + "";
                this.changeArr(index);

              }
            });
          }
        }
      }
    },

    // 表格合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];

      if (param.columns.length == 0) {
        return;
      }
      // console.log("param", param);

      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        //8列   序号 1列 2 4 7 不参与合计 单元内容返回 return 空显示
        if (index === 1 || index === 2 || index === 4 || index === 7) {
          sums[index] = "";
          return;
        }

        // console.log("123", column.property);
        // 遍历运量 司机单价 司机运费 字符串转Number
        //遍历列表 转换输入框的值为 Number
        const values = data.map((item) => {
          // console.log("值", item[column.property]);
          return Number(item[column.property]); //返回 数字 数据 到values数组
        });

        // console.log("values", values);
        //   every()方法会遍历数组的每一项，如果有有一项不满足条件，则表达式返回false,剩余的项将不会再执行检测；如果遍历完数组后，每一项都符合条，则返回true。
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          if (index == 3) {
            // console.log("运量");
            if (sums[index] > this.formData.volume) {
              sums[index] = "分配的运量超出总运量";
              this.compute = false;
              return sums;
            } else {
              this.compute = true;
              sums[index] += 0;
              return sums;
            }
          }
          // console.log(sums[index]);
          sums[index] += " 元";
        } else {
          sums[index] = "N/A";
        }
      });

      return sums;
    },

    //选择司机确认
    driverVerify() {
      this.addDriverVisible = false;
      this.SchedulingForm.DispatchingDriver = [];
      this.SchedulingForm.DispatchingDriver = this.$refs.registTable.selection;
      this.SchedulingForm.DispatchingDriver.forEach((item, i) => {
        this.SchedulingForm.DispatchingDriver[i].cargoWeight = "";
        this.SchedulingForm.DispatchingDriver[i].freight = "";
        this.SchedulingForm.DispatchingDriver[i].unitPrice = "";
        this.SchedulingForm.DispatchingDriver[i].measureUnit =
          this.formData.measureUnit;
      });
      this.SchedulingForm.DispatchingDriver = JSON.parse(
        JSON.stringify(this.SchedulingForm.DispatchingDriver)
      );
    },
    async queryDriver() {
   
      
      this.sreaChont++
      let mood = []
      if(this.sreaChont==2){
        this.driverMood = JSON.parse(JSON.stringify(this.driverDetailsData))
      } 
      if(this.driverNameQuery){
        this.driverDetailsData.forEach((item,i)=>{
          if(item.driverName.indexOf(this.driverNameQuery)!=-1){
            mood.push(item)
          }
        })
        this.driverDetailsData=mood
      }else{
        this.driverDetailsData  = this.driverMood
      }

      
    },
    async showAddDriverDialog() {
      if (!this.formData.appointSupplierId) {
        this.$message.error("请先选择承运方");
        return false;
      }
      let res = await this.$http.SettlementDocApi.queryDriverAndVehicle({
        appointSupplierId: this.formData.appointSupplierId,
      });
      this.addDriverVisible = true;
      this.driverDetailsData = res.data.data;
      let that = this;
      setTimeout(() => {
        that.driverDetailsData.forEach((row, i) => {
          that.SchedulingForm.DispatchingDriver.forEach((item, i) => {
            if (row.driverId == item.driverId) {
              that.$refs.registTable.toggleRowSelection(row);
            }
          });
        });
      }, 1000);
    },

    // 添加调度司机
    addDispatchDriver(e) {
      // 发货地
      this.SchedulingForm.DispatchingDriver.forEach((item, i) => {
        if (i == e) {
          this.SchedulingForm.DispatchingDriver.splice(i, 1);
        }
      });
    },
    deleteDriver(index) {
      this.addRouteForm.destinationPlaceTable.splice(index, 1);
    },
    async submittype() {
      let that = this;

      let data = JSON.parse(JSON.stringify(this.formData));
      let cont = [];
      this.SchedulingForm.DispatchingDriver.forEach((item, i) => {
        cont.push({
          driverName: item.driverName,
          vehicleInfo: item.vehicleInfo,
          unitPrice: item.unitPrice,
          measureUnit: item.measureUnit,
          freight: item.freight,
          driverId: item.driverId,
          cargoWeight: item.cargoWeight,
        });
      });
      let dirver = [];
      cont.forEach((item, i) => {
        dirver.push(item.driverId);
      });
      dirver = Array.from(new Set(dirver));
      data.appointDrivers = dirver.join(",");
      if (this.SchedulingForm.isDispatchingDriver == 1) {
        data.orderDispatches = cont;
        data.allotState = 1;
      } else {
        data.orderDispatches = [];
        data.allotState = 0;
        data.appointDrivers = "";
        this.compute = true;
      }
      let jingao = false;
      this.start.forEach((item) => {
        for (let k in item) {
          if (k == "address" || k == "contact" || k == "phone") {
            console.log(item[k]);
            if (!item[k]) {
              jingao = true;
            }
          }
        }
      });
      this.end.forEach((item) => {
        for (let k in item) {
          if (k == "address" || k == "contact" || k == "phone") {
            if (!item[k]) {
              jingao = true;
            }
          }
        }
      });

      if (jingao) {
        this.$message.error("请填写完整地址");
        return false;
      }

      data.startAddress = JSON.parse(JSON.stringify(this.start));
      data.endAddress = JSON.parse(JSON.stringify(this.end));
      if (this.attachment == '' & this.remark == '') {
        this.$message.error('驳回编辑后，文件或者备注必传')
        return false
      }
      let updata = {
        ownerId: "", //货主ID
        projectId: "", //项目ID
        pricingMethod: "", //计价方式
        ownerProject: "", //计划名称
        measureUnit: "", //计量单位
        volume: "", //运量
        transUnitPrice: "", //承运方单价
        totalAmount: "", //货主金额
        ownerUnitPrice: "", //货主单价
        contractorAmount: "", //承运人金额
        orderId: this.orderId,
      };
      for (let k in updata) {
        updata[k] = data[k];
      }
      // for (let k in updata) {
      //   if (!updata[k]) {
      //     this.$message.error('请保持信息完整')
      //     return false
      //   }
      // }
      updata.attachment = this.attachment
      updata.remark = this.remark
      let res3 = await this.$http.SettlementDocApi.platformOrderupdate(updata);
      if (res3.data.code == 200) {
        this.$message.success("修改成功");
        this.issubmit = true;
        this.$router.push("/orderManagement/WaybillManagement");
      }
    },
    submit() {
      this.$refs['transactionForm'].validate((valid) => {
        if (valid) {

          this.$refs['SchedulingForm'].validate((valid) => {
            if (valid) {
              let that = this;
              let data = JSON.parse(JSON.stringify(this.formData));
              let cont = [];
              this.SchedulingForm.DispatchingDriver.forEach((item, i) => {
                cont.push({
                  driverName: item.driverName,
                  vehicleInfo: item.vehicleInfo,
                  unitPrice: item.unitPrice,
                  measureUnit: item.measureUnit,
                  freight: item.freight,
                  driverId: item.driverId,
                  cargoWeight: item.cargoWeight,
                });
              });
              let dirver = [];
              cont.forEach((item, i) => {
                dirver.push(item.driverId);
              });
              dirver = Array.from(new Set(dirver));
              data.appointDrivers = dirver.join(",");
              if (this.SchedulingForm.isDispatchingDriver == 1) {
                data.orderDispatches = cont;
                data.allotState = 1;
              } else {
                data.orderDispatches = [];
                data.allotState = 0;
                data.appointDrivers = "";
                this.compute = true;
              }
              let jingao = false;
              this.start.forEach((item) => {
                for (let k in item) {
                  if (k == "address" || k == "contact" || k == "phone") {
                    console.log(item[k]);
                    if (!item[k]) {
                      jingao = true;
                    }
                  }
                }
              });
              this.end.forEach((item) => {
                for (let k in item) {
                  if (k == "address" || k == "contact" || k == "phone") {
                    if (!item[k]) {
                      jingao = true;
                    }
                  }
                }
              });

              if (jingao) {
                this.$message.error("请填写完整地址");
                return false;
              }

              data.startAddress = JSON.parse(JSON.stringify(this.start));
              data.endAddress = JSON.parse(JSON.stringify(this.end));
              // console.log(data);
              if (!this.compute) {
                this.$message.error("司机分配运量大于总运量");
                return false;
              }
              if (this.orderId) {
                this.$http.SettlementDocApi.platformOrderUpdateShipper(data).then(res => {
                  if (res.data.code == 200) {
                    this.$message.success("修改成功");
                    this.$router.push("/orderManagement/CarrierOrder");
                  }

                })

              } else {
                this.$http.SettlementDocApi.platformOrderaddShipper(data).then(res => {
                  if (res.data.code == 200) {
                    this.$message.success("提交成功");
                    this.$store.commit("saveCreateOrder", null);
                    this.issubmit = true;
                    this.$router.push("/orderManagement/CarrierOrder");
                  }

                })

              }
            } else {
              this.$message.error('请填写完整信息')
              return false;
            }
          });
        } else {
          this.$message.error('请填写调度信息中的必填项')
          return false;
        }
      });


    },
    // 计算司机金额
    CalculationResults(val) {
      if (val.unitPrice != "" && val.cargoWeight != "") {
        val.freight = val.unitPrice * val.cargoWeight;
      }
    },
  },
  mounted() { },
  beforeDestroy() {
    if (this.orderId || this.issubmit) {
      return;
    }
    let orderData = {
      formData: this.formData,
      transactionForm: this.transactionForm,
      SchedulingForm: this.SchedulingForm,
      ShippingReceivingInfoForm: this.ShippingReceivingInfoForm,
      start: this.start,
      end: this.end,
    };
    this.$store.commit("saveCreateOrder", orderData);
  },
  components: {
    breadcrumb,
  },
};
</script>

<style lang="scss" scoped>
.controlLine {
  height: 76px;
  width: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;


  .inputItem {
    display: flex;
    align-items: center;
    margin-right: 23px;

    >.title {
      color: #262626;
      font-size: 12px;
      margin-right: 7px;
    }

    >.inputBox {
      width: 160px;

      .select {
        ::v-deep .el-input__icon {
          line-height: 0;
        }
      }

      ::v-deep .el-input__inner {
        height: 32px;
        font-size: 12px;
      }

      ::v-deep .el-input__inner::placeholder {
        color: #c3c3c3;
        font-size: 12px;
      }
    }
  }
}

.pointer {
  &:hover {
    transition: 0.2s;
    cursor: pointer;
    opacity: 0.8;
  }
}

.reddian {
  ::v-deep .el-form-item__label:before {
    content: "*";
    color: #f56c6c;
    margin-right: 4px;
  }
}

.beforeRedDian:before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}

.Box {
  background-color: #fff;

  .header {
    height: 50px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    padding-left: 24px;
  }

  .main {
    padding: 34px 24px 52px;
    height: calc(100vh - 258px);
    overflow-y: scroll;

    .main_item {
      .titleBox {
        display: flex;
        background-color: #f8f8f8;
        height: 40px;

        .shuxian {
          height: 14px;
          width: 3px;
          background-color: #1890ff;
          margin: 13px 6px 13px 12px;
        }

        .title {
          color: #262626;
          font-size: 13px;
          font-weight: bold;
          line-height: 40px;
        }
      }

      ::v-deep .el-form-item__label {
        color: #262626;
        font-size: 12px;
        font-weight: bold;
        // height:32px;
        // line-height: 40px;

      }

      .formItem {
        padding-top: 28px;

        .input_form {
          ::v-deep .el-select {
            width: 100%;
          }
        }

        //选择车型
        .carTypeSelect {
          ::v-deep .el-select {
            width: 240px;
          }

          // 车辆照片
          .carPicBox {
            position: absolute;
            top: calc(100% + 8px);
            width: 240px;
            height: 161px;
            margin: 0 auto;

            .imgBg {
              background-color: #f5f5f5;
              width: 240px;
              height: 105px;

              .carPic {
                width: 240px;
                height: 105px;
                display: block;
              }
            }

            .infoBox {
              padding-top: 13px;
              border: 1px solid #f0f0f0;
              height: 56px;
              display: flex;
              justify-content: space-around;

              .info_item {
                display: flex;
                flex-direction: column;

                .info_item_tit {
                  color: #949494;
                  font-size: 12px;
                  line-height: 16px;
                }

                .text {
                  color: #262626;
                  font-size: 12px;
                  line-height: 16px;
                }
              }
            }
          }
        }

        // 订单备注
        .notesInput {
          width: 240px;
        }

        .addDriverBox {
          background-color: #f8f8f8;
          width: 100%;
          padding: 0 17px 19px;

          .addDriverBox_head {
            width: 100%;
            height: 57px;
            display: flex;
            align-items: center;

            .addDriverBtn {
              background-color: #1890ff;
              border-radius: 4px;
              height: 32px;
              width: 105px;
              color: #ffffff;
              font-size: 12px;
              padding: 8px 17px 9px 17px;
              transition: 0.2s;
              cursor: pointer;
              margin-right: 17px;

              .iconBtn {
                margin-right: 7px;
                font-size: 15px;
              }

              &:hover {
                opacity: 0.8;
              }
            }
          }
        }
      }
    }
  }
}

.footerControlBox {
  display: flex;
  align-items: center;
  position: absolute;
  z-index: 300;
  bottom: -16px;
  left: -16px;
  justify-content: center;
  height: 60px;
  width: calc(100% + 32px);
  background-color: #fff;
  margin-top: 28px;

  .cancelBtn {
    width: 80px;
    height: 36px;
    border: 1px solid #d9d9d9;
    color: #262626;
    font-size: 12px;
    border-radius: 4px;
    background-color: #fff;
    margin-right: 16px;

    &:hover {
      opacity: 0.8;
      transition: 0.2;
    }
  }

  .submitBtn {
    background-color: #1890ff;
    width: 80px;
    height: 36px;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
  }

  &:hover {
    opacity: 0.8;
    transition: 0.2;
  }
}

// 添加司机对话框
.addDriver_dialog {
  .dialog_footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    height: 80px;
    padding: 20px 0 24px;

    .cancelBtn2 {
      width: 80px;
      height: 36px;
      border: 1px solid #d9d9d9;
      color: #262626;
      font-size: 12px;
      border-radius: 4px;
      background-color: #fff;
      margin-right: 14px;

      &:hover {
        opacity: 0.8;
        transition: 0.2;
      }
    }

    .submitBtn2 {
      background-color: #1890ff;
      width: 80px;
      height: 36px;
      color: #fff;
      border-radius: 4px;
      font-size: 12px;
    }

    &:hover {
      opacity: 0.8;
      transition: 0.2;
    }
  }

  ::v-deep .el-dialog__body {
    padding: 31px 40px 24px 40px;
  }

  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #f0f0f0;
  }

  .titleBox {
    display: flex;
    margin-bottom: 17px;

    .title {
      color: #262626;
      font-size: 12px;
    }
  }

  .dialog_list {
    border: 1px solid #f0f0f0;
    border-bottom: none;

    .driverPicBox {
      height: 48px;
      width: 65px;
      background-color: #f1f0f0;

      .driverImg {
        height: 48px;
        width: 65px;
      }
    }

    .driverNameBox {
      display: flex;

      .driverName {
        color: #595959;
        font-size: 12px;
        margin-right: 5px;
      }

      .icon-info {
        font-size: 13px;
        color: #595959;
      }
    }

    // 表头样式
    ::v-deep .el-table__header th {
      padding: 8px 0;
    }

    ::v-deep .el-table__header th {
      background-color: #f5f5f5;
      color: #262626;
      font-size: 12px;
      font-weight: bold;
      text-align: left;

      // 表 body的td
      ::v-deep .el-table__body td {
        color: #262626;
        font-size: 12px;
      }
    }

    // 表身体
    ::v-deep .el-table__row {
      height: 76px;
    }

    ::v-deep .el-table-column--selection .cell {
      padding-left: 16px;
      padding-right: 16px;
    }
  }
}

// 货物明细弹框
.cargoDetails_dialog {
  .head {
    .importBtn {
      margin-bottom: 9px;
      width: 120px;
      height: 36px;
      background-color: #1890ff;
      color: #fff;
      font-size: 12px;

      &:hover {
        opacity: 0.8s;
        transition: 0.2s;
      }
    }
  }

  .dialog_footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    height: 80px;
    padding: 20px 0 24px;

    .cancelBtn3 {
      width: 80px;
      height: 36px;
      border: 1px solid #d9d9d9;
      color: #262626;
      font-size: 12px;
      border-radius: 4px;
      background-color: #fff;
      margin-right: 14px;

      &:hover {
        opacity: 0.8;
        transition: 0.2s;
      }
    }

    .submitBtn3 {
      background-color: #1890ff;
      width: 80px;
      height: 36px;
      color: #fff;
      border-radius: 4px;
      font-size: 12px;
    }

    &:hover {
      opacity: 0.8;
      transition: 0.2s;
    }
  }

  ::v-deep .el-dialog__body {
    padding: 22px 32px 24px 32px;
  }

  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #f0f0f0;
  }

  .cargoDetails_table {
    border: 1px solid #f0f0f0;
    border-bottom: none;

  }
}

.flex-fpkp {
  display: flex;
  margin-bottom: 15px
}

.cxbt {
  margin-left: 20px;
}
</style>

<style lang="scss">
// 司机信息和车辆信息
.BulletBox {
  padding: 18px 12px;

  >.info_item {
    >.titleBox {
      display: flex;
      align-items: center;
      margin-bottom: 14px;

      >.icon-xinxi {
        font-size: 16px;
        margin-right: 7px;
      }

      >.title {
        color: #262626;
        font-size: 14px;
        margin-right: 14px;
      }

      >.line {
        height: 1px;
        flex: 1;
        background-color: #f0f0f0;
      }
    }
  }
}

.null-png {
  height: 300px;
  width: 100%;
  font-weight: 600;
  display: flex;
  justify-content: center;
}

.null-png div {
  text-align: center;
}

.fpkp-dialog {
  padding-bottom: 30px;
}

.importBtn1 {
  width: 120px;
  font-size: 12px;
}
</style>

<style lang = "scss">
.tableRowStyleName {
  color: #262626 !important;
  font-size: 12px;
}
</style>
